<template>
    <div class="wg">
        <service :isShow="dialogFormVisible" @close='closeDialog' :titleDialog='titles'></service>
        <div class="sibian1">
            <img src="../assets/jianjie.png" alt="" style="width:0.25rem;height:0.25rem;">
            <span style="padding-left:0.12rem;">网格力量</span>
        </div>
         <div class="wg_number" @click="girdPower">
            <div class="evevt_ box-item">
            <li
              :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
              v-for="(item,index) in orderNum1"
              :key="index"
            >
              <span v-if="!isNaN(item)">
                <i ref="numberItem1">0123456789</i>
              </span>
              <span class="comma" v-else>{{item}}</span>
            </li>
          </div>
        </div>
        <div class="wg_t_title flex_b">
            <div class="wg_t_t_c flex_a bc">
                <span>类型</span>
                <span>{{this.list.length}}</span>
            </div>
            <div class="wg_t_t_c flex_a bb" @click="girdPower">
                <span>街道</span>
                <span>{{this.list.length}}</span>
            </div>
        </div>
        <div class="wg_list test-1">
            <div class="wg_list_text flex_c" v-for="(item,index) in list" :key="index">
                <span>{{item.name}}</span>
                <span>{{item.value}}</span>
            </div>
        </div>
    </div>
</template>

<script>
import service from "@/components/managePeople";
import {PowerGrid} from "@/api/index.js";
export default {
  data() {
    return {
      titles:'',
      dialogFormVisible:false,
      list: [{ type: "人大代表", num: 11 },{ type: "政协", num: 89 },{ type: "网格指导员", num: 11 },{ type: "网格长", num: 652 },{ type: "网络管理员", num: 852 },{ type: "网络信息员", num: 3723 },{ type: "网络信息员", num: 3723 },],
      orderNum1: ['0', '0', '0', '0', '0', '0'],
      b:null,
    };
  },
  components:{service},
  mounted() {
    //  this.toOrderNum()
  },
  created(){
      this.PowerGrids()     
  },
  methods:{
  girdPower(){
    this.dialogFormVisible=true
    this.titles='网格力量列表'
  },
  async PowerGrids(){
     try {
        const {data}  = await  PowerGrid()
        console.log(data)
         this.list=data.date.gridPower.gridPower
         this.b=parseInt(data.date.gridPower.gridPowerCount)
      } catch (error) {
        console.log(error)
      }
      let self = this;
      this.time1 = setTimeout(() => {
        //已完成
        self.toOrderNum1(this.b); // 这里输入数字即可调用
      }, 500);
  },
  closeDialog(){
    this.dialogFormVisible=false
  },
  // 设置文字滚动
    setNumberTransform() {
      const numberItems1 = this.$refs.numberItem1;
      const numberArr1 = this.orderNum1.filter(item => !isNaN(item));
      // 结合CSS 对数字字符进行滚动,显示订单数量
      
      for (let index = 0; index < numberItems1.length; index++) {
        const elem = numberItems1[index];
        elem.style.transform = `translate(-50%, -${numberArr1[index] * 10}%)`;
      }
      
      
    },
    toOrderNum1(num) {
      num = num.toString();
      // 把订单数变成字符串
      if (num.length < 6) {
        num = '0' + num; // 如未满八位数，添加"0"补位
        this.toOrderNum1(num); // 递归添加"0"补位
      } else if (num.length === 6) {
        // 订单数中加入逗号
        // num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8)
        this.orderNum1 = num.split(''); // 将其便变成数据，渲染至滚动数组
      } else {
        // 订单总量数字超过八位显示异常
        this.$message.warning('总量数字过大');
      }
      this.setNumberTransform();
    },
}}
</script>
<style lang="scss">
.wg {
  width: 100%;

.sibian1{
  height: 0.29rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size:0.2rem}
  .wg_number {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    margin-top: 0.1rem;
    span {
      cursor: pointer;
      width: 0.35rem;
      height: 0.4rem;
      border: 1px solid #45a1c8;
      text-align: center;
      color: #5cd5f4;
      font-weight: 600;
      font-size: 0.3rem;
      line-height: 0.4rem;
    }
    .no {
      color: #0c4886;
      font-size: 0.3rem;
      line-height: 0.4rem;
    }
  }
  .wg_t_title {
    width: 100%;

    .bc {
      background: #0662ec;
    }
    .bb {
      background: #030343;
      border: 1px solid #0708ba;
    }
    .wg_t_t_c {
      width: 49%;
      height: 0.3rem;
      margin: 0.06rem;

      span {
        color: #5cd5f4;
        font-size: 0.2rem;
      }
    }
  }

  .wg_list {
      height: 1.4rem;
        overflow: auto;

    .wg_list_text {
      height: 0.24rem;
        margin: auto;
      margin-top: 0.05rem;
      border-top: 1px solid #0708ba;
      border-bottom: 1px solid #0708ba;
      background: #030244;
      width: 98%;
    
      span{
          color: #FFF;
          font-size: 0.18rem;
          width: 50%;
         text-align: center;
      }
    }
  }
    .wg_list>.wg_list_text:nth-child(odd){
    background: linear-gradient(to right, #3587DA 0%, #01135B  30%, #02135B 70%,#3485D7 100%);
    opacity: 0.5;
    span{
        color: #FFF;
    }
  }
  .evevt_ {
          text-align: center;
          span {
            width: 0.28rem;
            line-height: 0.25rem;
            height: 0.25rem;
            // margin-left: 0.1rem;
            color: #0b5bd6;
            border: 1px solid #0b5bd6;
          }
        }
         .box-item {
        position: relative;
        height: 0.3rem;
        font-size: 0.6rem;
        line-height: 0.3;
        text-align: center;
        list-style: none;
        color: #2d7cff;
        writing-mode: vertical-lr;
        text-orientation: upright;
        /*文字禁止编辑*/
        -moz-user-select: none; /*火狐*/
        -webkit-user-select: none; /*webkit浏览器*/
        -ms-user-select: none; /*IE10*/
        -khtml-user-select: none; /*早期浏览器*/
        user-select: none;
        /* overflow: hidden; */
      }
       .number-item {
        text-align: center;
        width: 0.4rem;
        margin: 0 0.1rem;
        height: 0.35rem;
        // border: 1px solid #0b5bd6;
        color: #0b5bd6;
        font-size: 0.4rem;
        font-weight: 800;
        line-height: 0.6rem;
        & > span {
          position: relative;
          display: inline-block;
          margin-right: 0.1rem;
          width: 100%;
          height: 100%;
          writing-mode: vertical-rl;
          text-orientation: upright;
          overflow: hidden;
          & > i {
            font-style: normal;
            position: absolute;
            top: 0;
            left: 45%;
            transform: translate(-50%, 0);
            transition: transform 1s ease-in-out;
            letter-spacing: 0.1rem;
          }
        }
      }
      .number-item:last-child {
        margin-right: 0;
      }
}
</style>
